<template>
  <table class="my-2 w-full bg-white text-left" v-if="list.length > 0">
    <!-- head -->
    <thead class="border-b text-lg">
      <tr>
        <th scope="col" class="px-4 py-2">NO.</th>
        <th scope="col" class="px-4 py-2">股票</th>
        <th scope="col" class="px-4 py-2">涨幅</th>
        <th scope="col" class="px-4 py-2">偏离值</th>
        <th scope="col" class="px-4 py-2">是否异动</th>
        <th scope="col" class="px-4 py-2">N日涨幅偏离值</th>
        <th scope="col" class="px-4 py-2">异动停牌提醒</th>
        <th scope="col" class="px-4 py-2">异动停牌规则</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, i) in list" :key="item.symbol" class="border-b">
        <td class="whitespace-nowrap px-4 py-2 font-semibold">{{ item[0] }}</td>
        <td class="whitespace-nowrap px-4 py-2">
          <Stock :name="item[1].split('\n')[0]" :symbol="item[1].split('\n')[1]" type="tingpai"></Stock>
        </td>
        <td class="whitespace-nowrap px-4 py-2">
          <ChangePercent :percent="format(item[2])"></ChangePercent>
        </td>
        <td class="whitespace-nowrap px-4 py-2">{{ item[3] }}</td>
        <td class="whitespace-nowrap px-4 py-2 font-semibold" :class="item[4] == '未触发' ? 'text-green-600' : 'text-red-500'">
          {{ item[4] }}
        </td>
        <td class="whitespace-nowrap px-4 py-2">{{ item[5] }}</td>
        <td class="whitespace-nowrap px-4 py-2">{{ item[6] }}</td>
        <td class="whitespace-nowrap px-4 py-2">{{ item[7] }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script setup>
const props = defineProps(['list']);

// watch(() => props.degree, (e) => {
//   degree = e
//   renderChart()
// })

function format(str) {
  str = str.replace('%', '');
  str = parseInt(str) / 100;
  return str;
}
</script>
